<!--应用列表-->

<template>
  <div>
    <el-row :gutter="20" class="toolbar">
      <el-col :span="6" >
        <el-input placeholder="请输入应用名称" v-model="filters.appName" clearable></el-input>
      </el-col>
      <el-col :span="6">
        <el-select v-model="filters.hasOnline" placeholder="请选择状态" clearable>
          <el-option label="启用" value="ON"></el-option>
          <el-option label="禁用" value="OFF"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-col>
    </el-row>



    <el-row class="actions">
      <el-button type="primary" @click="addApp">新增</el-button>
      <el-button type="success" @click="exportData" :disabled="!selected.length">导出</el-button>
    </el-row>

    <el-table :data="apps"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="序号" width="60"></el-table-column>
      <el-table-column prop="appId" label="应用ID"></el-table-column>
      <el-table-column prop="appName" label="应用名称"></el-table-column>
      <el-table-column prop="hasOnline" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.hasOnline == 'ON' ? 'success' : 'danger'">
            {{ scope.row.hasOnline == 'ON' ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="paidDays" label="支付染色"></el-table-column>
      <el-table-column prop="unpaidDays" label="未支付染色"></el-table-column>
<!--      <el-table-column prop="customerId" label="抖音客服ID"></el-table-column>-->
<!--      <el-table-column prop="publicVersion" label="公测版本"></el-table-column>-->
<!--      <el-table-column prop="paidDays" label="支付染色天"></el-table-column>-->
<!--      <el-table-column prop="unpaidDays" label="未支付染色天"></el-table-column>-->
      <el-table-column label="操作">
        <template #default="scope">
          <el-button style="margin-left: -20px" @click="configure(scope.row)" type="text" size="small">配置书籍</el-button>
          <el-button  @click="openEditModal(scope.row)" type="text" size="small">修改应用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
    <el-pagination
            v-model:current-page="filters.pageNum"
            v-model:page-size="filters.pageSize"
            :page-sizes="[5, 10, 20, 30]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            class="doPage"
    />
    </div>

    <el-dialog title="修改应用列表" v-model="editModalVisible">
      <el-form :model="editForm">
        <el-form-item label="应用ID"  :label-width="formLabelWidth">
          <el-input v-model="editForm.appId" ></el-input>
        </el-form-item>
        <el-form-item label="应用密钥" :label-width="formLabelWidth">
          <el-input v-model="editForm.appSecret" ></el-input>
        </el-form-item>
        <el-form-item label="应用名称" :label-width="formLabelWidth">
          <el-input v-model="editForm.appName"></el-input>
        </el-form-item>
        <el-form-item label="公钥版本号" :label-width="formLabelWidth">
          <el-input v-model="editForm.keyVersion"></el-input>
        </el-form-item>
        <el-form-item label="渠道配置" :label-width="formLabelWidth">
          <el-select v-model="editForm.a" multiple>
            <el-option label="分销1" value="channel1"></el-option>
            <el-option label="分销2" value="channel2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自身商户号" :label-width="formLabelWidth">
          <el-input v-model="editForm.originMchId"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select  v-model="editForm.hasOnline">
            <el-option label="启用" value="ON"></el-option>
            <el-option label="禁用" value="OFF"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付染色" :label-width="formLabelWidth">
          <el-input v-model="editForm.paidDays"></el-input>
        </el-form-item>
        <el-form-item label="未支付染色" :label-width="formLabelWidth">
          <el-input v-model="editForm.unpaidDays"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="editForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editModalVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改应用列表" v-model="addModalVisible">
      <el-form :model="addForm">
        <el-form-item label="应用ID"  :label-width="formLabelWidth">
          <el-input v-model="addForm.appId" ></el-input>
        </el-form-item>
        <el-form-item label="应用密钥" :label-width="formLabelWidth">
          <el-input v-model="addForm.appSecret" ></el-input>
        </el-form-item>
        <el-form-item label="应用名称" :label-width="formLabelWidth">
          <el-input v-model="addForm.appName"></el-input>
        </el-form-item>
        <el-form-item label="公钥版本号" :label-width="formLabelWidth">
          <el-input v-model="addForm.keyVersion"></el-input>
        </el-form-item>
        <el-form-item label="渠道配置" :label-width="formLabelWidth">
          <el-select v-model="addForm.originMchId" multiple>
            <el-option label="分销1" value="channel1"></el-option>
            <el-option label="分销2" value="channel2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自身商户号" :label-width="formLabelWidth">
          <el-input v-model="addForm.originMchId"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="addForm.hasOnline">
            <el-option label="启用" value="ON"></el-option>
            <el-option label="禁用" value="OFF"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付染色" :label-width="formLabelWidth">
          <el-input v-model="addForm.paidDays"></el-input>
        </el-form-item>
        <el-form-item label="未支付染色" :label-width="formLabelWidth">
          <el-input v-model="addForm.unpaidDays"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="addForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addModalVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { searchApp,updateApp,createApp } from '@/api/app/app.js';
  import {baseApi} from "../../api/base";
  import { ElMessage } from 'element-plus';
  import router from "../../router";

  const filters = ref({
    appName: '',
    hasOnline: '',
    pageNum:1,
    pageSize:5
  });
  const apps = ref([{
    id:'',
    appId:'',
    appName:'',
    hasOnline:''
  }]);
  //判断是否与后端链接
  const loading = ref(false);
  const selected = ref([]);
  const total = ref(0);

  const editModalVisible = ref(false);
  const editForm = ref({
    appId:'',
    appSecret:'',
    appName:'',
    keyVersion:'',
    originMchId:'',
    paidDays:'',
    unpaidDays:'',
    remark:'',
    hasOnline:''
  });
  const formLabelWidth = '120px';

  const addModalVisible = ref(false);
  const addForm = ref({
    hasOnline:'ON'
  });

  const search = () => {
    searchApp(filters.value).then((res)=>{
      apps.value=res.data.data.currentData
      total.value=res.data.data.totalRecord
    })
  };

  const reset = () => {
    filters.value = {
      name: '',
      type: '',
      status: ''
    };
    search();
  };

  const addApp = (row) => {
    addForm.value = { ...row };
    addModalVisible.value = true;
  };

  const editApp = () => {
    console.log('Edit app');
  };

  const exportData = () => {
    console.log('Export data');
  };

  const handleSelectionChange = (val) => {
    selected.value = val;
  };

  const configure = (row) => {
    router.push({ path: "/main/bookDevote" })
    console.log('Configure', row);
  };

  const openEditModal = (row) => {
    editForm.value = { ...row };
    editModalVisible.value = true;
  };

  const confirmEdit = () => {
   baseApi(updateApp(editForm.value),() =>{
     search()
     editModalVisible.value = false;
   })

  };

  const confirmAdd = () => {
    baseApi(createApp(addForm.value),()=>{
      search()
      addModalVisible.value = false;
    })

  };

  const handleCurrentChange = (page) => {
    filters.pageNum = page;
    search();
  };

  const handleSizeChange = (size) => {
    console.log(size)
    filters.pageSize = size;
    search();
  };

  onMounted(() => {
    search();
  });
</script>

<style scoped>
  .toolbar {
    margin-bottom: 20px;
  }
  .actions {
    margin-bottom: 20px;
  }
  .dialog-footer {

    text-align: right;
  }
  .doPage{
    margin-top: 20px;
    margin-left: 800px;
  }
</style>
